\<template>
  <div class="r">
    <el-header style=" height: 46px;
    width: 1559px;
    margin-left: -20px">
      <index-nav></index-nav>
    </el-header>
    <div class="recruit">
      <div class="recruit_content">
        <h2>高考题库•原创编审团</h2>
        <h1>
          原创试题编审团
          <span>招募令</span>
        </h1>
        <h3>用碎片时间精编专业知识&#8195;让千万师生平等提升自我</h3>
        <p>
          目前已有:
          <span>
            <div>
              <span>0</span>
            </div>
            <div>
              <span>4</span>
            </div>
            <div>
              <span>5</span>
            </div>
            <div>
              <span>3</span>
            </div>
          </span> 名老师参加
        </p>
        <div class="recruit_join">
          <span>立即加入</span>
        </div>
      </div>
    </div>
    <div class="recruit_dowhat">
      <h2>编审团成员将做什么？</h2>
      <img src="../../public/img/dowhat.png" alt />
    </div>
    <div class="recruit_getwhat">
      <h2>编审团成员将获得什么？</h2>
      <img src="../../public/img/getwhat.png" alt />
    </div>
    <div class="recruit_apply">
      <h2>如何申请？</h2>
      <ul class="apply_content">
        <li class="step1">
          <h2>第一步</h2>
          <h3>百度文库教师认证</h3>
          <span class="apply_btn1">立即认证</span>
        </li>
        <li class="step2">
          <h2>第二步</h2>
          <h3>加入原创试题编审团</h3>
          <span class="apply_btn2">立即申请</span>
        </li>
        <li class="step3">
          <h2>第三步</h2>
          <h3>加入原创编审团Q群</h3>
          <span class="apply_btn3">加入Q群申领编审权限</span>
        </li>
      </ul>
    </div>
    <!-- 拖拽轮播 -->
    <div class="content">
      <div id="teacher_join">
        <h2>我们在这里等你加入</h2>
        <div class="swiper-container">
          <div class="swiper-wrapper" style="height:420px;">
            <div class="swiper-slide">
              <!-- 里面加div 以下同理 -->
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/zhao.jpg" alt />
                  <h3>赵叶</h3>
                  <h6>英语特级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于北京市经论中学</span>
                  <br />
                  <span>编写教辅图书28部</span>
                  <br />
                  <span>原创试卷上百套</span>
                  <br />
                  <span>愿在百度题库惠及更多人</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/xu.jpg" alt />
                  <h3>徐智愚</h3>
                  <h6>数学高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于上海市崇明中学</span>
                  <br />
                  <span>中国数学奥林匹克高级教练员</span>
                  <br />
                  <span>华东师范大学教育硕士导师</span>
                  <br />
                  <span>荣获苏布青数学教育奖二等奖</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/zhu.jpg" alt />
                  <h3>朱嘉鼎</h3>
                  <h6>语文高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于甘肃省庄浪县第四中</span>
                  <br />
                  <span>平凉市十佳高中骨干教师</span>
                  <br />
                  <span>甘肃省骨干教师、学科带头人</span>
                  <br />
                  <span>主编图书《中华大考场·语文》</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/sha.jpg" alt />
                  <h3>沙俊燕</h3>
                  <h6>英语高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于山东省德州市实验中学</span>
                  <br />
                  <span>所教考生平均提高25分以上</span>
                  <br />
                  <span>德州市教学能手，英语名师</span>
                  <br />
                  <span>擅长英语原创命题于高考辅导</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/qi.jpg" alt />
                  <h3>齐艳杰</h3>
                  <h6>生物高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于河北省昌黎县第一中学</span>
                  <br />
                  <span>县首批学科带头人、市骨干教师</span>
                  <br />
                  <span>多篇论文发表于国家核心期刊</span>
                  <br />
                  <span>主持完成多项教研课题</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/jiao.jpg" alt />
                  <h3>焦铸</h3>
                  <h6>历史二级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任职于黑龙江大庆实验中学</span>
                  <br />
                  <span>毕业于陕西师范大学</span>
                  <br />
                  <span>喜欢学习愿意分享</span>
                  <br />
                  <span>希望在百度分享和学习更多知识</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/liang.jpg" alt />
                  <h3>梁海莲</h3>
                  <h6>英语二级教师教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于广东省信宜市第二中学</span>
                  <br />
                  <span>优秀班主任、教学新星、先进教师</span>
                  <br />
                  <span>八个示范课被评为学校一等奖</span>
                  <br />
                  <span>多年高三英语教学经验</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/wang.jpg" alt />
                  <h3>王高翔</h3>
                  <h6>数学一级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于山西省大同市口泉中学</span>
                  <br />
                  <span>省高考阅卷优秀老师</span>
                  <br />
                  <span>省级教学能手，市级优秀教师</span>
                  <br />
                  <span>省三优课一等奖，市级骨干教师</span>
                </div>
              </div>
              <!-- <img
              src="https://img01.hua.com/uploadpic/newpic/201709151725388540.jpg"
              alt
              width="100%"
              />-->
            </div>
            <div class="swiper-slide">
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/ren.jpg" alt />
                  <h3>任理海</h3>
                  <h6>政治高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于广东省韶关市田家炳中学</span>
                  <br />
                  <span>韶关市中学</span>
                  <br />
                  <span>韶关市中小学首批学科带头人</span>
                  <br />
                  <span>致力于提升政治学科的教学水平</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/hou.jpg" alt />
                  <h3>侯建敏</h3>
                  <h6>物理高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于河北内丘中学</span>
                  <br />
                  <span>获河北省微课大赛一等奖</span>
                  <br />
                  <span>著有《高中物理解题方法例话》</span>
                  <br />
                  <span>发表专业论文100多篇</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/gen.jpg" alt />
                  <h3>耿东水</h3>
                  <h6>地理高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于河北定兴中学</span>
                  <br />
                  <span>保定市高中学科专家组成员</span>
                  <br />
                  <span>担任《解读衡中》《细节于高分》</span>
                  <br />
                  <span>《名师伴你行》等图书主编</span>
                </div>
              </div>
              <div class="teacher_card">
                <div class="card_nav">
                  <img src="../../public/img/fan.jpg" alt />
                  <h3>范鹏</h3>
                  <h6>化学高级教师</h6>
                </div>
                <div class="card_bottom">
                  <span>任教于上海进才高复中学</span>
                  <br />
                  <span>著有《高中化学考点详解》一书</span>
                  <br />
                  <span>十余年教学经验辅导初高中竞赛</span>
                  <br />
                  <span>致力于提升学生的化学竞赛水平</span>
                </div>
              </div>
              <!-- <img
              src="https://img01.hua.com/uploadpic/newpic/201709011117442888.jpg"
              alt
              width="100%"
              />-->
            </div>
          </div>
        </div>
      </div>
      <!-- 第二个轮播 -->
      <div class="news">
        <div class="swiper-container">
          <div class="swiper-wrapper swiper_w" style="height:500px;">
            <div class="swiper-slide swiper_s">
              <!-- 里面加div 以下同理 -->
              <img src="../../public/img/baidu.jpg" alt style="width:100%;height:500px;" />
              <div class="news_d">
                <h2
                  style="height:14px;color:white;float:left;font-weight:300;margin-top:10px;margin-left:15px;"
                >2016高考闪电估分行动--“为梦想而战”</h2>
                <span
                  style="float:right;height:25px;color:white;width:25px;margin-top:10px;margin-right:15px;"
                >1/3</span>
                <p
                  style="height:14px;color:white;float:left;font-weight:300;text-align:left;font-size:16px;margin-top:20px;margin-left:10px;"
                >2016年高考期间，百名原创编审团资深名师齐聚北京，他们于考生同步作答高考题，由资深教研员对答案进行严格把关，为高考考生提供最快速、最权威的在线估分服务，让考生先一步赢得人生，让好消息早一点于大家分享</p>
              </div>
            </div>
            <div class="swiper-slide swiper_s">
              <!-- <img
            src="https://img01.hua.com/uploadpic/newpic/201709151725388540.jpg"
            alt
            width="100%"
              />-->
              <img src="../../public/img/shuju.jpg" alt style="width:100%;height:500px;" />
              <div class="news_d">
                <h2
                  style="height:14px;color:white;float:left;font-weight:300;margin-top:10px;margin-left:15px;"
                >2015百度文库--《百度高考大数据透视白皮书》</h2>
                <span
                  style="float:right;height:25px;color:white;width:25px;margin-top:10px;margin-right:15px;"
                >2/3</span>

                <p
                  style="height:14px;color:white;float:left;font-weight:300;text-align:left;font-size:16px;margin-top:20px;margin-left:10px;"
                >
                  百度文库在京进行了K12战略发布会，发布了百度首本教辅书，业界首套智能化高考教辅书《大数据透视高考》， 该套教辅书与百度高考APP联动，通过大数据分析
                  历年高考常考知识点，帮助高三考生实现智能化复习备考。
                </p>
              </div>
            </div>
            <div class="swiper-slide swiper_s">
              <!-- <img
            src="https://img01.hua.com/uploadpic/newpic/201709011117442888.jpg"
            alt
            width="100%"
              />-->
              <img src="../../public/img/qc.jpg" alt style="width:100%;height:500px;" />
              <div class="news_d">
                <h2
                  style="height:14px;color:white;float:left;font-weight:300;margin-top:10px;margin-left:15px;"
                >2015高考闪电估分行动--“青春很想赢”</h2>
                <span
                  style="float:right;height:25px;color:white;width:25px;margin-top:10px;margin-right:15px;"
                >3/3</span>
                <p
                  style="height:14px;color:white;float:left;font-weight:300;text-align:left;font-size:16px;margin-top:20px;margin-left:10px;"
                >2015年我们首次聚在一起，于942万考生“同步”高考。没考完一科，考生可在数小时内通过百度高考快速估分。一位参与活动现场的教师感言“感谢百度让我二十年后以这种方式纪念那段青春飞扬、理想荡漾、挥斥方遒的日子”</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="news_bottom">
        申请加入原创编审团
      </span>
      <div class="class_bb"></div>
    </div>
    <!-- 底部 -->
    <index-footer></index-footer>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import Swiper from "swiper";
export default {
  name: "Slider",
  mounted() {
    new Swiper(".swiper-container", {
      loop: true, // 如果需要分页器
      pagination: ".swiper-pagination", // 如果需要前进后退按钮
      // nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev" // 如果需要滚动条        scrollbar: '.swiper-scrollbar',
    });
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: "微软雅黑";
  text-decoration: none;
}
.content {
  background-color: #f8f8f8;
}
#teacher_join {
  padding-top: 45px;
  width: 80%;
  height: 600px;
  margin: 0 auto;
}
#teacher_join h2 {
  margin-bottom: 45px;
  font-size: 32px;
  text-align: center;
  font-weight: 400;
}
.swiper-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

.news_bottom {
  display: block;
  margin: 80px auto 0;
  background-color: #fa776b;
  color: #fff;
  font-size: 30px;
  line-height: 75px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  letter-spacing: -2px;
  width: 413px;
  height: 75px;
}
.news_bottom:hover{
  background-color: #fd9084;
}
.class_bb{
  margin: 40px auto 0;
  color: #fff;
  font-size: 30px;
  line-height: 75px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  letter-spacing: -2px;
  width: 413px;
  height: 75px;
}
.swiper-wrapper {
  height: 200px;
}
/* 
.swiper-slide img {
} */

.swiper-slide {
  text-align: center;
  /* background: #fff; */
  /* Center slide text vertically */
  /* display: -webkit-box; */
  /* height: 250px; */
}
.card_nav {
  width: 286px;
  height: 142px;
  background-color: #ffffff;
}
.card_bottom {
  width: 284px;
  height: 141px;
}
.card_bottom span {
  position: relative;
  top: 20px;
  font-weight: 300;
  font-size: 15px;
  line-height: 34px;
}
.card_nav img {
  position: relative;
  top: -52px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.card_nav h3 {
  position: relative;
  top: -36px;
  font-size: 24px;
}
.card_nav h6 {
  position: relative;
  top: -28px;
  font-size: 17px;
  font-weight: 300;
}
.teacher_card {
  margin-left: 12px;
  margin-top: 80px;
  float: left;
  width: 286px;
  height: 334px;
  border: 1px solid #e2e2e2;
}

/* 第二个轮播 */
.news {
  padding-top: 45px;
  width: 80%;
  height: 500px;
  margin: 0 auto;
  /* background-color: red; */
}
.news_d {
  position: relative;
  bottom: 120px;
  width: 1214px;
  height: 120px;
  background-color: black;
  opacity: 0.7;
}

.recruit {
  position: relative;
  width: 100%;
  height: 564px;
  background: url("../../public/img/zhaomubackground.png");
}
.recruit_content {
  padding-top: 55px;
  text-align: center;
  width: 1200px;
  margin: 0 auto;
  /* background-color: skyblue; */
}
.recruit_content h2 {
  color: white;
  font-weight: 300;
  font-size: 44px;
}
.recruit_content h1 {
  margin-top: 55px;
  color: white;
  font-size: 70px;
}
.recruit_content h1 span {
  color: #11a68d;
}
.recruit_content h3 {
  margin-top: 20px;
  font-size: 22px;
  color: white;
  font-weight: 400;
}
.recruit_content p {
  margin-top: 65px;
  color: #fa776b;
  font-size: 22px;
}
.recruit_content p div {
  width: 23px;
  height: 27px;
  display: inline-block;
  background: url("../../public/img/zhaomu.png") no-repeat;
  margin-left: 5px;
}
.recruit_content p div span {
  color: white;
}
.recruit_join {
  position: relative;
  width: 413px;
  height: 75px;
  margin: 34px auto 0;
  text-align: center;
  background-color: #fa776b;
  border-radius: 6px;
}
.recruit_join span {
  line-height: 70px;
  color: white;
  font-size: 29px;
}
.recruit_join:hover {
  background-color: #fd9084;
}
.recruit_dowhat {
  width: 100%;
  height: 360px;
  background-color: #fff;
}
.recruit_dowhat img {
  display: block;
  margin: 0 auto;
}
.recruit_dowhat h2 {
  margin-top: 70px;
  margin-bottom: 40px;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
}
.recruit_getwhat {
  width: 100%;
  height: 460px;
  background-color: #f5f5f5;
  padding-top: 70px;
}
.recruit_getwhat img {
  display: block;
  margin: 0 auto;
}
.recruit_getwhat h2 {
  margin-bottom: 50px;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
}
.recruit_apply {
  width: 100%;
  height: 500px;
}
.recruit_apply h2 {
  margin-top: 70px;
  margin-bottom: 40px;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
}
.apply_content {
  margin-left: 160px;
  width: 1221px;
}
.apply_content li {
  float: left;
  width: 384px;
  height: 258px;
  margin-right: 21px;
  border: 1px solid #e3e3e3;
  padding-top: 10px;
}
.step1 {
  background: url("../../public/img/step1.png") no-repeat;
  background-position: 21px 0px;
}
.step2 {
  background: url("../../public/img/step2.png") no-repeat;
  background-position: 21px 0px;
}
.step3 {
  background: url("../../public/img/step3.png") no-repeat;
  background-position: 21px 0px;
}
.apply_content .step1 h2 {
  margin-top: 30px;
  font-size: 30px;
  font-weight: 700;
  color: #333;
}
.apply_content .step2 h2 {
  margin-top: 30px;
  font-size: 30px;
  font-weight: 700;
  color: #333;
}
.apply_content .step3 h2 {
  margin-top: 30px;
  font-size: 30px;
  font-weight: 700;
  color: #333;
}
.apply_content h3 {
  margin-top: -20px;
  font-size: 28px;
  color: #333;
  text-align: center;
  font-weight: 400;
}
.apply_btn1 {
  display: block;
  margin: 30px auto 0;
  background-color: #fa776b;
  color: #fff;
  font-size: 30px;
  line-height: 75px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  letter-spacing: -2px;
  width: 342px;
  height: 75px;
}
.apply_btn1:hover {
  background-color: #fd9084;
}
.apply_btn2 {
  display: block;
  margin: 30px auto 0;
  background-color: #e2e2e2;
  color: #fff;
  font-size: 30px;
  line-height: 75px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  letter-spacing: -2px;
  width: 342px;
  height: 75px;
}
.apply_btn3 {
  display: block;
  margin: 30px auto 0;
  background-color: #e2e2e2;
  color: #fff;
  font-size: 30px;
  line-height: 75px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  letter-spacing: -2px;
  width: 342px;
  height: 75px;
}
</style>